<template>
    <span class="agent-select">
        <FormItem label="代理商：">
            <Select :size="size" v-model="selected_1" clearable filterable  @on-change="handleSearchAgent1"
                    :loading="loading_1" placeholder="选择1级代理商">
                <Option v-for="(option, index) in agents_1" :value="option.id" :key="option.id">{{option.realname}}</Option>
            </Select>
        </FormItem>
        <FormItem label-width="0">
            <Select :size="size" v-model="selected_2" clearable filterable  @on-change="handleSearchAgent2"
                    :loading="loading_2" placeholder="选择2级代理商">
                <Option v-for="(option, index) in agents_2" :value="option.id" :key="option.id">{{option.realname}}</Option>
            </Select>
        </FormItem>
        <FormItem label-width="0">
            <Select :size="size" v-model="selected_3" clearable filterable  @on-change="handleSearchAgent3"
                    :loading="loading_3" placeholder="选择3级代理商">
                <Option v-for="(option, index) in agents_3" :value="option.id" :key="option.id">{{option.realname}}</Option>
            </Select>
        </FormItem>
    </span>
</template>

<style>
    .agent-select .ivu-select-single .ivu-select-input {
        width: 120px !important;
    }
</style>

<script>
    import util from '@/libs/util';

    export default {
        data () {
            return {
                agents_1: [],
                agents_2: [],
                agents_3: [],

                loading_1: false,
                loading_2: false,
                loading_3: false,

                selected_1: '',
                selected_2: '',
                selected_3: '',
            }
        },

        props: {
            agentId: String,
            size: String,
        },

        created () {
            this.getData(1, '', '', (data) => {
                this.agents_1 = data;
            });
        },

        watch: {
            selected_1: function (id) {
                this.agentId = id;
                this.$emit('on-change', this.agentId);
            },

            selected_2: function (id) {
                if (id == '') {
                    this.agentId = this.selected_1;
                } else {
                    this.agentId = id;
                }
                this.$emit('on-change', this.agentId);
            },

            selected_3: function (id) {
                if (id == '') {
                    this.agentId = this.selected_2;
                } else {
                    this.agentId = id;
                }
                this.$emit('on-change', this.agentId);
            }
        },

        methods: {
            getData (level = 1, parent_id = '', keyword = '', callback) {
                if (level == 1) {
                    this.loading_1 = true;
                } else if (level == 2) {
                    this.loading_2 = true;
                } else if (level == 3) {
                    this.loading_3 = true;
                }

                let params = { level: level, parent_id: parent_id, keyword: keyword };

                setTimeout(() => {
                    util.api().get(`/admin/api/agents/names`, { params }).then((resp) => {
                        if (resp.data.status == true) {
                            callback(resp.data.data);
                        }

                        if (level == 1) {
                            this.loading_1 = false;
                        } else if (level == 2) {
                            this.loading_2 = false;
                        } else if (level == 3) {
                            this.loading_3 = false;
                        }
                    }).catch((e) => {
                        util.handleApiException(e, this, `获取${level}级代理列表失败`);
                    });
                }, 500);
            },

            remote_1 (keyword) {
                if (keyword !== '') {
                    this.getData(1, '', keyword, (data) => {
                        this.agents_1 = data;
                    });
                }
            },

            remote_2 (keyword) {
                if (keyword !== '') {
                    this.getData(2, this.selected_1, keyword, (data) => {
                        this.agents_2 = data;
                    });
                }
            },

            remote_3 (keyword) {
                if (keyword !== '') {
                    this.getData(3, this.selected_2, keyword, (data) => {
                        this.agents_3 = data;
                    });
                }
            },

            handleSearchAgent1 () {
                this.remote_1(' ');
                this.remote_2(' ');

                this.selected_2 = '';
                this.selected_3 = '';
            },

            handleSearchAgent2 () {
                this.remote_3(' ');
                this.selected_3 = '';
            },

            handleSearchAgent3 (id) {

            },
        }
    }
</script>